<!DOCTYPE html> 
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>Map Me</title> 
	<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.1.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAiyHoBSIvIBdrxXcttmxgdMywYeB_Lzao&sensor=true"></script>
	<script src="js/map-app.js"></script>
</head> 
	
<body> 

<!-- Start of first page: #home -->
<div data-role="page" id="home">

	<div data-role="header" data-position="fixed">
	    <h3>Map Me</h3>  
	</div><!-- /header -->

	<div data-role="content">
        <a href="#" id="btnLocateMe" data-role="button">LocateMe</a>
		<div id="instruction">Click on the LocateMe button to retrieve the GPS Location and plot it on Google Map</div>
		<div id="map-canvas"></div>
	</div><!-- /content -->

</div><!-- /page home -->

<!-- Start of the second page that shows the map #map-page -->
 <div data-role="page" id="map-page" data-add-back-btn="true">

  <div data-role=header>
    <h1>Map</h1>
  </div>

  <div data-role="content"></div>

</div> <!-- /page map-page -->

</body>
</html>